<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
			</view>

			<view class="flex-center-between" style="padding: 0 30rpx 36rpx;">
				<view class="flex-center">
					<view class="u-avatar-66 clear-flex" style="width: 112rpx; height: 112rpx;">
						<x-image :src="showImage(dataInfo.imgUrl, 'logo')"/>
					</view>
					<view class="flex-between flex-column u-m-l-30">
						<view class="u-f-44 u-lh-60 font-medio">{{ dataInfo.name || '' }}</view>
						<view class="u-f-32 u-lh-44 color-grew linecamp-1" style="width: 400rpx;">
							{{ dataInfo.desc || '' }}</view>
					</view>
				</view>

				<scroll-view scroll-x>
					<view class="clear-flex nowrap">
						<x-common-btn width="154" height="62" background="#FD1E43">
							<view class="u-f-26 u-lh-36 font-medio"
								@click="jumpUrl(`/pages/shop/staff/work/work?merchantStaffId=${ merchantStaffId }`)">
								{{ lang_shop.addWork }}</view>
						</x-common-btn>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 列表 -->
		<view>
			<mescroll-body height="calc(100vh - 244rpx - var(--status-bar-height))" ref="mescrollRef"
				@init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="flex-between" style="padding: 20rpx 30rpx 0;">
					<view v-for="(list, lindex) in groups" :key="lindex" :class="[lindex > 0 ? 'u-p-l-18' : '']"
						style="width: calc(50%)">
						<view v-for="(item, index) in list" :key="index" class="u-m-b-20 bg-white u-radius-8"
							style="position: relative;width: 100%; border-radius: 8rpx; overflow: hidden;">
							<x-image :src="showImage(item.mediaUrl, 'logo')" mode="widthFix" style="max-height: 600rpx;"/>
							<view class="linecamp-1" style="padding: 16rpx;">{{ item.title }}</view>
							<image src="@/static/image/common/delete_fill.png" class="delete-btn"
								@click.stop="deleteBefore(item)"></image>
						</view>
					</view>

					<!-- 留空 -->
					<view style="height: 200rpx"></view>
				</view>
			</mescroll-body>
		</view>

		<u-modal v-model="deleteVisible" :show-title="false" show-cancel-button :content="lang_shop.deleteWorkTips"
			:cancel-text="lang_common.cancel" :confirm-text="lang_common.done" :confirm-color="'#FD1E43'"
			@confirm="deleteAction" @cancel="deleteVisible = false" z-index="9999999">
		</u-modal>
	</view>
</template>

<script>
	import waterfall from '@/utils/waterfall.js'
	import {
		merchantStaffWorkPage,
		merchantDeleteStaffWork
	} from '@/api/merchant/merchant.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				contactVisible: false,
				deleteVisible: false,
				itemObj: {},
				dataInfo: {},
				leftRightHeight: [0, 0],
				groups: [
					[],
					[]
				],
			}
		},
		// 获取类型
		onLoad({
			merchantStaffId,
			type
		}) {
			this.merchantStaffId = merchantStaffId
			uni.$on('update-shop-staff-work-list', () => {
				this.downCallback()
			})

			// 获取全局事件
			let event = this.getOpenerEventChannel();
			event.on('shop-staff-worklist', (e) => {
				this.dataInfo = {
					...e
				}
			})
		},
		methods: {
			// 删除前
			deleteBefore(item) {
				this.itemObj = {
					...item
				}
				this.deleteVisible = true
			},
			// 删除回调·
			deleteAction() {
				merchantDeleteStaffWork({
					staffWorkId: this.itemObj.id
				}).then(() => {
					this.downCallback()
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				merchantStaffWorkPage({
					pageNumber: page.num,
					pageSize: page.size,
					merchantStaffId: this.merchantStaffId
				}).then(res => {

					if (page.num == 1) {
						this.groups = [
							[],
							[]
						]
						this.leftRightHeight = [0, 0]
					}; //如果是第一页需手动制空列表
					waterfall({
						hs: this.leftRightHeight,
						list: res.list,
						key: 'mediaUrl'
					}, (hs, e) => {
						node && node.mescroll.endSuccess(res.list.length);
						this.leftRightHeight = hs
						this.groups = [
							[...this.groups[0], ...e[0]],
							[...this.groups[1], ...e[1]]
						]
					})
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style scoped lang="scss">
	.delete-btn {
		position: absolute;
		top: 14rpx;
		right: 14rpx;
		z-index: 1;
		width: 40rpx;
		height: 40rpx
	}
</style>
